// 获取元素溢出部分的宽度
import { ref, Ref } from 'vue'
import { useMutationObserver } from '@vueuse/core'

export default function (el: Ref) {
  const flowWidth = ref<string>('')
  const getNodeFlowWidth = () => {
    const dom: HTMLSpanElement = el.value as HTMLSpanElement
    if (dom) {
      const domWdith = dom.offsetWidth
      const parentWidth = (dom.parentNode as HTMLDivElement).offsetWidth
      flowWidth.value = domWdith > parentWidth ? domWdith - parentWidth + 10 + 'px' : ''
    }
  }
  useMutationObserver(
    el,
    mutations => {
      // console.log('变化了')
      getNodeFlowWidth()
    },
    {
      attributes: true,
      childList: true,
      subtree: true
    }
  )

  // const observer = new MutationObserver((mutations, observer) => {
  //   console.log('变')
  // })
  // observer.observe(el.value, {
  //   childList: true,
  //   // 'characterData': true,
  //   // 'attributes': true,
  //   subtree: true
  // })

  return {
    flowWidth
  }
}
